# Google Maps Basic

« Previous
Next Chapter »

## Create a Basic Google Map

This example creates a Google Map centered in London, England:

## Example

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Try it yourself »

The rest of this page describes the example above, step by step.

## 1. Load the Google API

The Google Maps API is JavaScript library. It can be added to a web page with a script tag:

<script src="http://maps.googleapis.com/maps/api/js"></script>

## 2. Set Map Properties

Create a function to initialize the map:

function initialize() {
}

In the initialize function, create an object (mapProp) to define the properties for the map:

var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.

The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.

The mapTypeId property specifies the map type to display.

The following map types are supported:

- ROADMAP (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)

## 3. Create a Map Container

Create a named <div> element to "contain" the map. Use CSS to size the element:

## Example

<div id="googleMap" style="width:500px;height:380px;"></div>

| The map will always "inherit" its size from its container element.

## 4. Create a Map Object

## Example

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

The code above creates a new map inside the <div> element (googleMap) using the parameters that are passed (mapProp).

## 5. Add an Event Listener to Load the Map

Add a DOM listener that will execute the initialize() function on window load (when the page is loaded):

google.maps.event.addDomListener(window, 'load', initialize);

## Asynchronously Loading

It is possible to load the Google Maps API on demand.

The example below uses window.onload to load the Google Maps API after the page has fully loaded.

The loadScript() function creates the Google Maps API <script> tag. In addition, the callback=initialize parameter is added to the end of the URL to execute the initialize() function after the API is fully loaded:

## Example

function loadScript() {
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Try it yourself »

## Multiple Maps

The example below defines four maps on one web page (four maps with different map types):

## Example

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Try it yourself »

## Google API Key

Google allows your web site to call any Google API, many thousand times per day.

If you plan for heavier traffic, you should get a free API key from Google.

Go to https://console.developers.google.com to get a free key.

Google Maps expects to find the API key in the key parameter when loading an API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples